<template>
    <div class="popUpMain">
        <el-dialog
        :visible.sync="status"
        width="40%"
        :before-close="handleClose"
        >
           <div class="title"><img :src="imgURL[tmpType=='fail'?1:0]"> {{title}}</div>
           <div class="hint">{{hint}}</div>
           <div class="button">
               <el-button v-if="tmpType != 'fail'" type="primary" @click="handleConfirm">确定</el-button>
                <el-button @click="handleClose">取消</el-button>
           </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props:{
            status:Boolean,
            tmpType:String,
            title:{
                type:String,
                default:'提示'
            },
            hint:{
                type:String,
                default:'确定要继续操作吗?'
            },

        },
        data(){
            return {
                imgURL:[require('@/assets/images/popupSuccess.png'),require('@/assets/images/popupfail.png')]
            }
        },
        methods:{
            handleClose(){
                this.$emit('close',false)
            },
            handleConfirm(){
                this.$emit('confirm',this.tmpType)
            }
        }
    }
</script>

<style lang="scss">
.popUpMain{
    width: 100%;
    height: 100%;
    .title{
        height: 28px;
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.85);
        font-size: 20px;
        img{
            width: 26px;
            height: 26px;
            display: block;
            margin-right: 9px;
        }
    }
    .hint{
        margin: 16px 0 0 36px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
    }
    .button{
        display: flex;
        justify-content: flex-end;
        margin-top: 50px;
    }
    .el-dialog{
        margin-top: 35vh !important;
    }
    .el-dialog__headerbtn{
        top: 15px !important;
        right: 15px !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
        width: 20px!important;
        height: 20px!important;
        color: #fff!important;
        border-radius: 50%!important;
        background: #CECECE!important;
        display: flex!important;
        justify-content: center!important;
        align-items: center!important;
        font-weight: 600!important;
    }
    // .el-dialog__header{
    //     display: none !important;
    // }
    .el-dialog__body{
        padding: 10px 35px 20px 35px;
    }
}
</style>